<template>
  <div class="notification-list">
    <a-list :data-source="notifications" :locale="{ emptyText: '暂无通知' }">
      <template #renderItem="{ item }">
        <a-list-item 
          :class="{ 'unread-item': !item.read }"
          @click="$emit('read', item.id)"
        >
          <a-list-item-meta>
            <template #avatar>
              <a-badge :dot="!item.read">
                <a-avatar :style="{ backgroundColor: getNotificationColor(item.type) }">
                  <component :is="getNotificationIcon(item.type)" />
                </a-avatar>
              </a-badge>
            </template>
            <template #title>
              <div class="notification-title">
                {{ item.title }}
                <a-tag v-if="!item.read" color="blue" size="small">未读</a-tag>
              </div>
            </template>
            <template #description>
              <div class="notification-content">{{ item.content }}</div>
              <div class="notification-time">{{ formatTime(item.timestamp) }}</div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import {
  SettingOutlined,
  ExclamationCircleOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons-vue'

interface Notification {
  id: number
  type: string
  title: string
  content: string
  timestamp: Date
  read: boolean
}

interface Props {
  notifications: Notification[]
}

defineProps<Props>()
defineEmits<{
  read: [id: number]
}>()

const getNotificationColor = (type: string) => {
  const colorMap = {
    system: '#1890ff',
    alert: '#ff4d4f',
    info: '#52c41a',
  }
  return colorMap[type as keyof typeof colorMap] || '#666'
}

const getNotificationIcon = (type: string) => {
  const iconMap = {
    system: 'SettingOutlined',
    alert: 'ExclamationCircleOutlined',
    info: 'InfoCircleOutlined',
  }
  return iconMap[type as keyof typeof iconMap] || 'InfoCircleOutlined'
}

const formatTime = (timestamp: Date) => {
  const now = new Date()
  const diff = now.getTime() - timestamp.getTime()
  const minutes = Math.floor(diff / (1000 * 60))

  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`

  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}小时前`

  const days = Math.floor(hours / 24)
  return `${days}天前`
}
</script>

<style scoped>
.notification-list {
  max-height: 500px;
  overflow-y: auto;
}

.unread-item {
  background-color: #f6ffed;
  border-left: 3px solid #52c41a;
}

.notification-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-content {
  color: #666;
  margin-bottom: 4px;
}

.notification-time {
  color: #999;
  font-size: 12px;
}

.unread-item:hover {
  background-color: #f0f9ff;
  cursor: pointer;
}
</style>